<template>
	<div>
		<!-- #ifdef MP-WEIXIN -->
		<div class="header" :style="(background?'background:' + background:'') + ';' + (backShow?'':'box-shadow:none;')">
			<div class="header_box_icn" v-if="backBtn">
				<image class="retn_icn" :src="retnIcn" @click="backPage"></image>
			</div>
			<div>
				{{title}}
			</div>
		</div>
		<!-- #endif -->
		<!-- #ifndef MP-WEIXIN -->
		<div class="header" :style="(background?'background:' + background:'') + ';' + (backShow?'':'box-shadow:none;')">
			<div class="header_box_icn" v-if="backBtn">
				<image class="retn_icn" :src="retnIcn" @click="backPage"></image>
			</div>
			<div>
				{{title}}
			</div>
		</div>
		<!-- #endif -->
	</div>
</template>

<script>
	export default {
		props: {
			backBtn:{
				type:Boolean,
				default:true,
			},
			title: {
				type: String,
				default: '自定义标题'
			},
			size:{
				type: Number,
				default: 32
			},
			color:{
				type: String,
				default: '#000'
			},
			titleShow: {
				type: Boolean,
				default: true
			},
			backShow: {
				type: Boolean,
				default: true
			},
			background:{
				type: String,
				default: ""
			}
		},
		data() {
			return {
				height :0,
				top:0,
				retnIcn:"https://www.kugou.com/common/images/icon_arrow_left.png",
			}
		},
		methods: {
			backPage(){
				uni.navigateBack();
			}
		}
	}
</script>

<style lang="scss" scoped>

.header {
	// padding-top: 120rpx;
	/* #ifdef MP-WEIXIN */
	
	padding: 120rpx 25rpx 30rpx;
	/* #endif */
	/* #ifndef MP-WEIXIN */
	
	padding: 60rpx 25rpx 30rpx;
	/* #endif */
	display: flex;
	align-items: center;
	box-shadow: 0rpx 0rpx 8rpx 1rpx #c3c3c3;
	color: #fff;
	justify-content: center;
	font-size: 32rpx;
	font-weight: bold;
	position: relative;
	div {
		color: #fff;
	}
	.header_seacrh {
		border-radius: 50rpx;
		padding: 8rpx 25rpx;
		height: 50rpx;
		width: 388rpx;
		display: flex;
		align-items: center;
		.seacrh_Input {
			color: #fff;
		}
		.seacrh_Icn {
			width: 30rpx;
			height: 30rpx;
			margin-right: 15rpx;
		}
	}
	
}

.seacrh_Icnid {
	width: 32rpx;
	height: 32rpx;
	margin-right: 15rpx;
	background: url('https://www.kugou.com/yy/static/images/search/search.png') no-repeat;
	background-position: -40px -56px;
}

.header_box_icn {
	position: absolute;
	left: 25rpx;
	
	display: flex;
	align-items: center;
	margin-right: 12rpx;
	border-radius: 50%;
	.retn_icn {
		width: 60rpx;
		height: 60rpx;
	}
}


.backIcn {
	position: absolute;
	top: 80rpx;
	left: 30rpx;
	
}

</style>
